import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaDialog,
    WeaMoreButton,
    WeaRightMenu,
    WeaLeftRightLayout,
    WeaSteps,
    WeaFormItem,
    WeaSearchGroup,
    WeaUpload,
    WeaCheckbox,
} from "ecCom";
import {WeaSwitch} from 'comsMobx';
import {Button} from "antd";
import _ from 'lodash';

import * as IconConstant from '../../constant/IconConstant.js';
import LanguageConstant from '../../constant/LanguageConstant.js';
import CommonConfig from '../../constant/CommonConfig.js';
import BookmarkMatchingComponent from './BookmarkMatchingComponent';
import '../../style/addWorkflowSetting.less';

const {getLabel} = WeaLocaleProvider;
const {Step} = WeaSteps;

@inject("addWorkflowMouldSettingStore", "workflowSettingListStore", "bookmarkMatchingStore")
@observer
class AddWorkflowMouldSetting extends Component {

    componentDidMount() {
        const {addWorkflowMouldSettingStore} = this.props;
        addWorkflowMouldSettingStore.resetAddWorkflowSettingForm();
        addWorkflowMouldSettingStore.getAddWorkflowSettingForm();
    }

    render() {
        const {addWorkflowMouldSettingStore, bookmarkMatchingStore} = this.props;
        const {addWorkflowSetting, addSettingStep, workflowSettingId, workflowMouldRelationalId, closeAddWorkflowSettingDialog} = addWorkflowMouldSettingStore;
        const {resetBookmarkMatchingDatas} = bookmarkMatchingStore;
        const dialogTitle = getLabel(LanguageConstant.NEW_CONTRACT_WORKFLOW_SETTING, '新建合同范本设置');
        const dialogBtn = this.getDialogBtns();

        return (
            <div className="add-workflow-setting">
                <WeaDialog
                    onCancel={() => this.closeAddWorkflowSettingDialog()}
                    title={dialogTitle}
                    visible={addWorkflowSetting}
                    style={{width: 1200, height: 800}}
                    hasScroll
                    buttons={dialogBtn}
                    icon={IconConstant.WEADIALOG_ICON}
                    iconBgcolor={IconConstant.WEADIALOG_ICON_BG_COLOR}
                    className="add-workflow-setting-dialog"
                >
                    <Fragment>
                        <WeaLeftRightLayout
                            leftCom={this.getStep()}
                            showBtn={false}
                        >
                            {(addSettingStep == 0) && this.getAddSettingContent()}
                            {(addSettingStep == 1) && <BookmarkMatchingComponent
                                workflowMouldRelationalId={workflowMouldRelationalId}/>}
                        </WeaLeftRightLayout>
                    </Fragment>
                </WeaDialog>
            </div>
        );
    }

    getDialogBtns() {
        const {addWorkflowMouldSettingStore} = this.props;
        const {addSettingStep, addWorkflowSettingNextStep, saveAddWorkflowSettingForm, loading} = addWorkflowMouldSettingStore;
        let dialogBtns = [];
        if (addSettingStep == 0) {
            dialogBtns.push(<Button type="primary" disabled={loading}
                                    onClick={() => this.saveWorkflowAndMouldSettingForm()}>{getLabel("30986", "保存")}</Button>);
            dialogBtns.push(<Button type="primary" disabled={loading}
                                    onClick={() => addWorkflowSettingNextStep(1)}>{getLabel(LanguageConstant.NEXT_STEP, "下一步")}</Button>);
        } else if (addSettingStep == 1) {
            dialogBtns.push(<Button type="primary" disabled={loading}
                                    onClick={() => this.saveMouldBookmarksMatching()}>{getLabel("30986", "保存")}</Button>);
        }
        return dialogBtns;
    }


    /**
     * 保存模板书签匹配数据
     */
    saveMouldBookmarksMatching = () => {
        const {bookmarkMatchingStore, workflowSettingListStore, addWorkflowMouldSettingStore} = this.props;
        const {addWorkflowSetting, saveAddWorkflowSettingForm, method, selectedWorkflowId, updateLoading} = addWorkflowMouldSettingStore;
        const {saveBookmarkMatching} = bookmarkMatchingStore;
        const {openSettingDetail, getWorkflowTree} = workflowSettingListStore;
        const workflowId = toJS(selectedWorkflowId);
        updateLoading(true);
        saveBookmarkMatching({}, () => {
            updateLoading(false);
            this.closeAddWorkflowSettingDialog();
            if (method == 'new') {
                openSettingDetail(selectedWorkflowId);
                getWorkflowTree();
            }
        });
    }

    /**
     * 关闭弹框
     */
    closeAddWorkflowSettingDialog = () => {
        const {bookmarkMatchingStore, addWorkflowMouldSettingStore} = this.props;
        const {resetBookmarkMatchingDatas} = bookmarkMatchingStore;
        const {closeAddWorkflowSettingDialog, resetAddWorkflowSettingForm} = addWorkflowMouldSettingStore;
        closeAddWorkflowSettingDialog();
        resetAddWorkflowSettingForm();
        resetBookmarkMatchingDatas();
    }

    /**
     * 保存选择路径和模板表单数据
     */
    saveWorkflowAndMouldSettingForm = () => {
        const {addWorkflowMouldSettingStore, workflowSettingListStore} = this.props;
        const {addWorkflowSetting, saveAddWorkflowSettingForm, method} = addWorkflowMouldSettingStore;
        const {openSettingDetail, getWorkflowTree} = workflowSettingListStore;
        saveAddWorkflowSettingForm(null, method == 'new' ? (workflowId) => {
            getWorkflowTree();
            openSettingDetail(workflowId);
        } : null);
    }

    getAddSettingContent() {
        const {addWorkflowMouldSettingStore} = this.props;
        const {addWorkflowSettingForm, addWorkflowSettingFormConditions, uploadMouldChange, chooseExistMouldLinkage, chooseExistMould} = addWorkflowMouldSettingStore;
        const {isFormInit} = addWorkflowSettingForm;
        let group = [];
        let col = 1;
        isFormInit && toJS(addWorkflowSettingFormConditions).map(c => {
            let items = [];
            c.items.map(field => {
                if (field.conditionType === 'UPLOAD' && !chooseExistMould) {
                    const {otherParams} = field;
                    const {maxMouldFileUploadSize} = otherParams;
                    items.push({
                        com: (
                            <WeaFormItem
                                label={`${field.label}`}
                                labelCol={{span: `${6}`}}
                                ratio1to2
                                wrapperCol={{span: `${18}`}}>
                                <WeaUpload
                                    uploadUrl="/api/doc/upload/uploadFile"
                                    category="string"
                                    maxUploadSize={maxMouldFileUploadSize ? maxMouldFileUploadSize : CommonConfig.maxMouldFileUploadSize}
                                    limitType={CommonConfig.limitUploadMouldFileTypes}
                                    maxFilesNumber={1}
                                    viewAttr={3}
                                    isDetail={false}
                                    autoUpload={true}
                                    replaceWhenOver={false}
                                    onChange={(ids, list) => uploadMouldChange(ids, list)}
                                    datas={field.datas}
                                />
                            </WeaFormItem>),
                        col: col,
                    });
                } else {
                    const {otherParams} = field;
                    if (otherParams && otherParams.linkageField === 'chooseExistMould') {
                        if (chooseExistMould && otherParams.linkageVal == 0) {
                            return;
                        } else if (!chooseExistMould && otherParams.linkageVal == 1) {
                            return;
                        }
                    }
                    if (field.conditionType === 'SWITCH' && field.domkey.includes("chooseExistMould")) {
                        items.push({
                            com: (
                                <WeaFormItem
                                    label={`${field.label}`}
                                    labelCol={{span: `${6}`}}
                                    ratio1to2
                                    wrapperCol={{span: `${18}`}}>
                                    <WeaCheckbox
                                        value={chooseExistMould ? 1 : 0}
                                        display="switch"
                                        style={{display: 'inline'}}
                                        onChange={value => chooseExistMouldLinkage(value)}
                                    />
                                </WeaFormItem>),
                            col
                        });
                    } else {
                        items.push({
                            com: (<WeaFormItem
                                label={`${field.label}`}
                                labelCol={{span: `${6}`}}
                                ratio1to2
                                tipPosition="bottom"
                                wrapperCol={{span: `${18}`}}>
                                <WeaSwitch fieldConfig={field} form={addWorkflowSettingForm}/>
                            </WeaFormItem>),
                            col: col,
                        });
                    }
                }
            });
            group.push(<WeaSearchGroup needTigger={true} title={c.title} showGroup={true} items={items}/>)
        });
        return group;
    }


    getStep() {
        const {addWorkflowMouldSettingStore} = this.props;
        const {addSettingStep} = addWorkflowMouldSettingStore;
        return (
            <div className="add-workflow-setting-stepGroup">
                <WeaSteps current={addSettingStep} direction='vertical'>
                    <Step description={getLabel(LanguageConstant.CHOOSE_WORKFLOWPATH_AND_MOULD, '选择路径和模板')}/>
                    <Step description={getLabel(LanguageConstant.LABEL_MATCH, "书签匹配")}
                          onClick={() => this.goNextStep(1)}/>
                </WeaSteps>
            </div>
        );
    }

    goNextStep() {

    }

}

export default AddWorkflowMouldSetting;